<style lang="scss" scoped>
  .login{width:360px;height:360px;background:#fff;border-radius:3px;z-index: 99}
  .login h2{text-align: center;padding:40px 0;font-size:30px;font-weight:normal;color:#8492A6}
  .form-box{margin:0 30px;}
  .bg{background:url('../assets/images/background-2.jpg') no-repeat center / cover;}
  .section-image:after {
      background-color: rgba(0,0,0,.7);
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
  }
  .full-page-background, .full-page:after {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
</style>
<template>
  <div class="flex flex-center full-height">
    <div class="mask section-image full-height"></div>
    <div class="login">
      <h2>登录系统</h2>
      <div class="form-box">
        <el-form ref="form" :model="form">
          <el-form-item>
            <el-input v-model="form.username" placeholder="用户名">
              <template slot="prepend"><i class="fa fa-user-o"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" v-model="form.password" placeholder="密码">
              <template slot="prepend"><i class="fa fa-lock"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button type="primary" :disabled="disable" style="width:100%;" @click.native.prevent="submit" :loading="loading">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="full-page-background bg"></div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        loading: false,
        disable: true,
        form: {
          username: '',
          password: ''
        }
      }
    },
    created () {
      const self = this
      self.$watch('form', () => {
        if (self.form.username && self.form.password) {
          self.disable = false
        } else {
          self.disable = true
        }
      }, {deep: true})
    },
    methods: {
      submit () {
        const self = this
        let params = {
          username: this.form.username,
          password: this.form.password,
        }
        self.$api.login(params).then(res => {
          console.log(res)
          if (res.code === 0) {
            window.sessionStorage.setItem('token', res.data.token)
            // window.sessionStorage.setItem('publicKey', res.data.publicKey)
            self.$store.commit('setToken', res.data.token)
            // self.$store.commit('setPublicKey', res.data.publicKey)
            const url = self.$route.query.redirect || '/'
            self.$router.replace(url)
          } else {
            self.$message.error(res.msg)
          }
        })
      }
    }
  }
</script>
